<!--
 * @FilePath: \vue2.7_Mars3D_template\index.html
 * @Author: maggot-code
 * @Date: 2022-11-21 14:19:59
 * @LastEditors: zhangxin
 * @LastEditTime: 2023-05-15 16:14:40
 * @Description:
-->
<!DOCTYPE html>
<html lang="zn-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .loader-container {
            width: 100px;
            height: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .loader-child {
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 50%;

            &:nth-of-type(1) {
                left: 0%;
                top: 0%;
                animation: rotate-one 1.15s linear infinite;
                border-bottom: 3px solid #5c5edc;
            }

            &:nth-of-type(2) {
                right: 0%;
                top: 0%;
                animation: rotate-two 1.15s linear infinite;
                border-right: 3px solid #9e85c3;
            }

            &:nth-of-type(3) {
                right: 0%;
                bottom: 0%;
                animation: rotate-three 1.15s linear infinite;
                border-top: 3px solid #e9908a;
            }
        }

        @keyframes rotate-one {
            0% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-two {
            0% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-three {
            0% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
        }

        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #app {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
    <script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
    <script src="http://mars3d.cn/lib/video/flv/flv.min.js" type="text/javascript"></script>

    <!--引入mars3d库lib-->
    <link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
    <!-- <script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script> -->
    <title>vue2.7_mars3d_template</title>
</head>

<body>
    <div id="app">
        <!-- 原加载动画 -->
        <div class="loader-container">
            <div class="loader-child"></div>
            <div class="loader-child"></div>
            <div class="loader-child"></div>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
</body>

</html>